<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员中心 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .feature-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-primary, .btn-secondary {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }
        .dashboard-card{
            flex:1;
            width: 100%;
        }
        .card-header{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<header>
    <div class="container header-container">
        <div class="logo">
            <i class="fas fa-truck-fast"></i>
            <h1>物流追踪系统</h1>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="../../index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="../../pages/user/dashboard.html"><i class="fas fa-user"></i> 用户中心</a></li>
                <li><a href="../../pages/courier/dashboard.html"><i class="fas fa-truck"></i> 物流员中心</a></li>
                <li><a href="dashboard.html" class="active"><i class="fas fa-cogs"></i> 管理员中心</a></li>
                <li><a href="#" id="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
            </ul>
        </nav>
        <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
    </div>
</header>

<main class="container" id="app-container">
    <section class="hero">
        <div class="hero-content">
            <h2>管理员中心</h2>
            <p>管理系统用户、物流信息和系统配置</p>
        </div>
    </section>

    <section class="dashboard-cards user-cards">

<!--            最近活动-->
            <div class="card animate-on-scroll dashboard-card">
                <div class="card-header ">
                    <h2><i class="fas fa-history"></i> 最近活动</h2>
                    <a href="#" class="view-all-link">查看全部</a>
                </div>
                <div class="card-content">
                    <div class="activity-feed" id="activity-feed">
                        <!-- 模拟数据 -->
                        <div class="activity-item">
                            <div class="activity-icon"><i class="fas fa-box"></i></div>
                            <div class="activity-content">
                                <p>包裹 <strong>PKG123456</strong> 状态更新为 <span
                                        class="status-badge status-delivered">已送达</span></p>
                                <p class="activity-time">10分钟前</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon"><i class="fas fa-user-plus"></i></div>
                            <div class="activity-content">
                                <p>新用户 <strong>张三</strong> 注册</p>
                                <p class="activity-time">1小时前</p>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon"><i class="fas fa-truck-moving"></i></div>
                            <div class="activity-content">
                                <p>包裹 <strong>PKG654321</strong> 状态更新为 <span
                                        class="status-badge status-in-transit">运输中</span></p>
                                <p class="activity-time">2小时前</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


<!--            用户管理-->
            <div class="card animate-on-scroll dashboard-card">
                <div class="card-header">
                    <h2><i class="fas fa-users-cog"></i> 用户管理</h2>
                    <a href="#" class="view-all-link">查看全部</a>
                </div>
                <div class="card-content">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">128</div>
                            <div class="stat-label">总用户数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">5</div>
                            <div class="stat-label">今日新增</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">24</div>
                            <div class="stat-label">活跃用户</div>
                        </div>
                    </div>
                    <p>管理系统中的用户账户、角色和权限</p>
                    <div class="feature-actions">
                        <a href="management.html?type=users" class="btn-primary">
                            <i class="fas fa-user-cog"></i> 管理用户
                        </a>
                        <a href="management.html?type=roles" class="btn-secondary">
                            <i class="fas fa-user-shield"></i> 角色权限
                        </a>
                    </div>
                </div>
            </div>
<!--            物流管理-->
            <div class="card animate-on-scroll dashboard-card">
                <div class="card-header">
                    <h2><i class="fas fa-truck-cog"></i> 物流管理</h2>
                    <a href="#" class="view-all-link">查看全部</a>
                </div>
                <div class="card-content">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">8</div>
                            <div class="stat-label">物流员数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">47</div>
                            <div class="stat-label">今日配送</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">35</div>
                            <div class="stat-label">平均时效(分钟)</div>
                        </div>
                    </div>
                    <p>管理物流员信息、配送路线和物流状态</p>
                    <div class="feature-actions">
                        <a href="management.html?type=couriers" class="btn-primary">
                            <i class="fas fa-user-truck"></i> 物流员管理
                        </a>
                        <a href="management.html?type=routes" class="btn-secondary">
                            <i class="fas fa-road"></i> 路线管理
                        </a>
                    </div>
                </div>
            </div>

            <!--包裹管理-->
            <div class="card animate-on-scroll dashboard-card">
                <div class="card-header">
                    <h2><i class="fas fa-boxes-packing"></i> 包裹管理</h2>
                    <a href="#" class="view-all-link">查看全部</a>
                </div>
                <div class="card-content">
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">23</div>
                            <div class="stat-label">今日新增</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">47</div>
                            <div class="stat-label">待处理</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">3</div>
                            <div class="stat-label">异常包裹</div>
                        </div>
                    </div>
                    <p>管理包裹信息、状态跟踪和异常处理</p>
                    <div class="feature-actions">
                        <a href="management.html?type=packages" class="btn-primary">
                            <i class="fas fa-box-search"></i> 包裹查询
                        </a>
                        <a href="management.html?type=exceptions" class="btn-secondary">
                            <i class="fas fa-exclamation-triangle"></i> 异常处理
                        </a>
                    </div>
                </div>
            </div>
    </section>
</main>

<footer>
    <div class="container footer-container">
        <div class="footer-section">
            <h3>关于我们</h3>
            <p>物流追踪系统致力于为用户提供高效、便捷、可靠的物流信息追踪服务，让物流变得更加透明和可控。</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-weixin"></i></a>
                <a href="#"><i class="fab fa-weibo"></i></a>
                <a href="#"><i class="fab fa-qq"></i></a>
            </div>
        </div>
        <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
                <li><a href="../../index.html">首页</a></li>
                <li><a href="../../pages/user/dashboard.html">用户中心</a></li>
                <li><a href="../../pages/courier/dashboard.html">物流员中心</a></li>
                <li><a href="dashboard.html">管理员中心</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>帮助中心</h3>
            <ul>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">使用指南</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">服务条款</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>联系我们</h3>
            <ul>
                <li><i class="fas fa-phone"></i> 400-123-4567</li>
                <li><i class="fas fa-envelope"></i> support@wuliuzhuizong.com</li>
                <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区物流大厦15层</li>
            </ul>
        </div>
    </div>
    <div class="container footer-bottom">
        <p>&copy; 2023 物流追踪系统 版权所有</p>
    </div>
</footer>

<script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function () {
        // 退出登录
        document.getElementById('logout-btn').addEventListener('click', (e) => {
            e.preventDefault();
            // 模拟退出登录
            localStorage.removeItem('token');
            localStorage.removeItem('userInfo');
            window.location.href = '../../pages/auth/login.html';
        });

        // 移动端菜单切换
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const mainNav = document.querySelector('.main-nav');

        if (mobileMenuBtn && mainNav) {
            mobileMenuBtn.addEventListener('click', function () {
                mainNav.classList.toggle('active');
                mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
                mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
            });
        }

        // 滚动动画
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.animate-on-scroll');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;

                if (elementPosition < screenPosition) {
                    element.classList.add('visible');
                }
            });
        };

        // 执行初始化
        animateOnScroll();
        window.addEventListener('scroll', animateOnScroll);
    });
</script>
</body>
</html>